<template>
  <div class="app-container">
    <!--
    <div class="filter-container">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input v-model="listQuery.searchValue" size="small" placeholder="请输入关键词" clearable @clear="refresh" style="width: 100%;">
            <el-button slot="append" icon="el-icon-search" @click="search" type="primary">搜索</el-button>
          </el-input>
        </el-col>
        <el-col :span="12">
          <div style="float:right;">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="add" style="margin-left: 16px;">新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-divider />
    -->

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" stripe>
      <el-table-column fixed label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.roleId }}
        </template>
      </el-table-column>
      <el-table-column label="角色名称" prop="roleName" />
      <el-table-column label="角色KEY" prop="roleKey" />
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{ scope.row.status?(scope.row.status=='1'?'停用':'正常'):'-' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <span>
            <el-button circle type="success" icon="el-icon-more" size="mini" @click="openDetailDialog(scope.row.roleId)" title="详情"></el-button>
            <!--
            <el-button circle type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.roleId)" title="修改"></el-button>
            <el-button circle type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.roleId)" title="删除"></el-button>
            -->
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
      @pagination="fetchData" />

    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'modify' ? '修改' : '新增'">
      <el-form ref="dataForm" :model="formData" label-width="120px" label-position="right" v-if="formData" :rules="rules">
        <el-row :gutter="20">
          <template v-if="formData.roleId">
            <el-col :span="24">
              <el-form-item label="角色ID">
                <span>{{formData.roleId}}</span>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色KEY" prop="roleKey">
              <el-input v-model="formData.roleKey" placeholder="请输入角色KEY" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色排序">
              <el-input-number v-model="formData.roleSort" :min="1" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="formData.status">
                <el-radio :label="'1'">禁用</el-radio>
                <el-radio :label="'0'">正常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="formData.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="text-right">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="detailDialogVisible" title="详情">
      <el-form ref="detailForm" :model="detailData" label-width="120px" label-position="right" v-if="detailData">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="ID">
              <span>{{detailData.roleId}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色名">
              <span>{{detailData.roleName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="角色KEY">
              <span>{{detailData.roleKey}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序">
              <span> {{ detailData.roleSort}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{detailData.createTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人">
              <span>{{detailData.createBy}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="状态">
              <span>{{detailData.status === '0' ? '正常' : '禁用'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <span>{{detailData.remark}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import {
    roleDetail,
    roleAdd,
    roleDelete,
    roleEdit,
    roleList,
  } from '@/api/role'
  import { addUser, delUser, updateUser, userDetails } from '@/api/user'

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        total: 0,
        list: [],
        listLoading: false,
        listQuery: {
          pageNum: 1,
          pageSize: 10,
          searchValue: undefined
        },
        dialogVisible: false,
        dialogType: 'create',
        loading: false,
        parents: [],
        detailData: null,
        detailDialogVisible: false,
        formData: null,
        rules: {
          roleName: [{ required: true, messages: '角色名必填', trigger: 'blur' }],
          roleKey: [{ required: true, messages: '角色KEY必填', trigger: 'blur' }],
        }
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      openDetailDialog(roleId) {
        roleDetail(roleId).then(response => {
          if (response.code === 200 ){
            this.detailData = response.data
            this.detailDialogVisible = true
          } else {
            this.$message.error('获取角色详情失败：' + response.msg)
          }
        })
      },
      search() {
        this.fetchData()
      },
      refresh() {
        this.listQuery = {
          pageNum: 1,
          pageSize: 10,
          searchValue: undefined
        }
        this.fetchData()
      },
      fetchData() {
        this.listLoading = true
        roleList(this.listQuery).then(response => {
          this.list = response.rows
          this.total = response.total
          this.listLoading = false
        })
      },
      add() {
        this.formData = {
          roleName: '',
          roleKey: '',
          roleSort: '',
          status: 0,
          remark: ''
        }
        this.dialogVisible = true
        this.dialogType = 'create'
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      edit(roleId) {
        roleDetail(roleId).then(response => {
          if (response.code === 200 ){
            this.formData = {
              roleId: response.data.roleId,
              roleName: response.data.roleName,
              roleKey: response.data.roleKey,
              roleSort: response.data.roleSort,
              status: response.data.status,
              remark: response.data.remark
            }
            this.$nextTick(() => {
              this.dialogVisible = true
              this.dialogType = 'modify'
              this.$refs['dataForm'].clearValidate()
            })
          } else {
            this.$message.error('获取角色详情失败：' + response.msg)
          }
        })
      },
      del(roleId) {
        this.$confirm('确认删除该条数据吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roleDelete(roleId).then(response => {
            if (response.code === 200) {
              this.$message.success('删除成功！')
              this.fetchData()
            } else {
              this.$message.error('删除失败：' + response.msg)
            }
          })
        })
      },
      submit() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            if (!this.formData.roleId) {
              // 新增
              roleAdd(this.formData).then(response => {
                if (response.code === 200) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  this.fetchData()
                  this.dialogVisible = false
                } else {
                  this.$message.error("新增失败：" + response.msg)
                }
              })
            } else {
              // 修改
              roleEdit(this.formData).then(response => {
                if (response.code === 200) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  })
                  this.fetchData()
                  this.dialogVisible = false
                } else {
                  this.$message.error("新增失败：" + response.msg)
                }
              })
            }
          }
        })
      }
    }
  }
</script>
